<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            计算属性：
                计算 - 额外增加运算过程 - 具有方法特性的相关代码
                属性 - 一个存在于对象中的变量 - 具有对象中属性变量的相关特性(调用方式是对象的属性调用方式)
            + vue的计算属性 实际上是 将属性定义时构成的数据劫持代码，暴露（getter setter）给开发人员自行定义和描述
        -->
        <p>msg:{{ msg }}</p>
        <input type="text" v-model="msg">
        <hr>
        <p>info:{{ info }}</p>
        <input type="text" v-model="info">
        <hr>
        <input type="checkbox" v-model="all">
        <input type="checkbox" :checked="all" @change=" all = $event.target.checked ">
        <ul>
            <li v-for="(item, index) in list" :key="index">
                <input type="checkbox" v-model="item.state"> {{ item.name }}
            </li>
        </ul>
        <hr>
        <input type="button" value="控制台输出all变量的结果" @click="printAllValue()">
        <hr>
    </div>
</body>
<script>
    // let data = {};
    // Object.defineProperty(data,"msg",{
    //     get(){},
    //     set(nv){}
    // })

    new Vue({
        el:"#app",
        data:{
            msg:"msg",
            temp: "info数据",
            // 以数据为驱动
            list:[
                { name:"Lily",state:false },
                { name:"Arturo",state:false },
                { name:"Fae",state:false },
                { name:"Rollin",state:false },
                { name:"Emmie",state:false },
                { name:"Frank",state:false }
            ],
            // info:"asdasd",
            email:""
        },
        // vue的配置根属性上，定义关键字 computed 描述计算属性
        // computed 计算属性是vue实例的 另外一个开发者可定义的数据仓库
        //      !! 实际使用时，一般为让计算属性发挥其相关自定义响应式的作用，
        //         需要让其依赖于其他数据仓库中的变量作为存储变量
        //      !! 在计算属性的定义语法中，方法中的this 被vue 锁定于 当前vue实例
        //      !! 计算属性定义的属性变量，在vue解析后，也会被定义与当前vue实例的根属性上
        //         -> 开发时可能会造成 data 和 computed 的属性名称冲突
        //      !! 计算属性可以通过结果缓存方式实现代码效率的提升


        // 取值为 object 属性，其中 key 为新增属性名 ，value为该属性的相关定义描述
        //     + value 取值 Function | Object:{ get:function,set:function }
        computed:{
            info:{
                get:function(){
                    console.log("info-get-this:",this);
                    // return "info数据";
                    return this.temp;
                },
                set(nv){
                    console.log("info-get-this:",this);
                    console.log(nv); 
                    this.temp = nv;
                }
            },
            all:{
                get(){
                    console.log(1);
                    // ES6 语法简写
                    return this.list.every( item=>item.state );
                },
                //newValue - nv
                set(nv){
                    // itany 
                    // console.log(nv);
                    this.list.forEach(item=>item.state = nv);
                }
            },
            // 定义被劫持数据 checkEmail，但只完成 getter 方法描述 -> 只读属性
            //               该变量由vue 提供一个 空的 setter 函数
        },
        methods: {
            printAllValue(){
                console.log("当前vue实例对象:",this);
                console.log( "all计算属性的值：",this.all );
            }
        },
        
    })
</script>
</html>